<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <style>
        table {
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td, th {
            text-align: center;
            border: 1px solid;
        }

        div {
            text-align: center;
            margin: 50px;
        }


    </style>
</head>
<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/vue/axios-0.18.0.js"></script>

<div id="app" class="app">

    <input type="text" id="name"  placeholder="请输入角色" v-model="fromData.name" autocomplete="off">
    <input type="text" id="keyword" placeholder="请输入角色标识" v-model="fromData.keyword" autocomplete="off">
    <input type="text" id="description" placeholder="请输入角色描述" v-model="fromData.description" autocomplete="off">
    <input type="button" value="添加" @click="save()" id="add">

    <table id="tb">
        <caption>角色信息表</caption>
        <tr>
            <th>角色名称</th>
            <th>角色标识</th>
            <th>角色描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>系统管理师</td>
            <td>Role_ADMIN</td>
            <td>11111</td>
            <!--JavaScript:void(0):组织链接默认行为-->
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
        </tr>

        <tr>
            <td>健康管理师</td>
            <td>Role_HEALTH_MANAGER</td>
            <td>222222</td>
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
        </tr>
    </table>
</div>
<script>

    var vue = new Vue({
        el: '#app',
        data: {
            RoleList: [],
            fromData:{}
        },
        methods: {
            save() {
                axios.post("/role/getRole.do",this.fromData).then((response) => {
                    if (response.data.flag) {
                        this.RoleList = response.data.data;
                    }
                });
                //alert("1222")
            }

        }
    });





</script>

</body>

</html>